<template>
  <a-card class="fromBox" title="筹资项目申报">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <div class="Funding-content">
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
        <div class="fromBox">
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">申请信息：</h3>
          <a-form-item label="项目名称" name="blprojectname">
            <a-input v-model:value="formState.blprojectname" placeholder="请填写" disabled />
          </a-form-item>
          <a-form-item label="长期筹资" name="bltype">
            <a-radio-group v-model:value="formState.bltype" disabled>
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="筹资目标" name="blfinancmoney">
            <a-input v-model:value="formState.blfinancmoney" placeholder="请填写" disabled style="width: 200px" />
            <span style="color: red">(单位/元)</span>
          </a-form-item>
          <a-form-item label="申报单位" name="blsubject">
            <a-select v-model:value="formState.blsubject" placeholder="请选择项申报单位" allowClear disabled>
              <a-select-option :value="item.blname" v-for="(item, index) in Deport">{{ item.blname }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="负责人姓名" name="blleader">
            <a-input v-model:value="formState.blleader" placeholder="请填写" disabled />
          </a-form-item>
          <a-form-item label="联系人姓名" name="bllinker">
            <a-input v-model:value="formState.bllinker" placeholder="请填写" disabled />
          </a-form-item>
          <a-form-item label="联系电话" name="bllinktel">
            <a-input v-model:value="formState.bllinktel" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div>
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">项目信息：</h3>
          <a-form-item label="项目描述" name="blbrief">
            <a-textarea v-model:value="formState.blbrief" :rows="12" placeholder="简单描述项目用途及目的,200字以内" disabled />
          </a-form-item>
          <a-form-item label="项目简介" name="bldetail">
            <a-textarea
              v-model:value="formState.bldetail"
              :rows="12"
              placeholder="包含项目的用途、预期效果、建议起捐额度、答谢方式等、500字以内"
              disabled
            />
          </a-form-item>
          <a-form-item label="项目类型" name="blext3">
            <a-select v-model:value="formState.blext3" placeholder="请选择项目类型" allowClear disabled>
              <a-select-option value="110周年校庆专题">110周年校庆专题</a-select-option>
              <a-select-option value="人才培养">人才培养</a-select-option>
              <a-select-option value="校园活动">校园活动</a-select-option>
              <a-select-option value="校友返校">校友返校</a-select-option>
              <a-select-option value="基础建设">基础建设</a-select-option>
              <a-select-option value="科研创新">科研创新</a-select-option>
              <a-select-option value="社会公益">社会公益</a-select-option>
              <a-select-option value="事业发展">事业发展</a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div>
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">图片信息：</h3>
          <a-form-item label="图片上传">
            <a-upload
              disabled
              list-type="picture-card"
              :before-upload="beforeUpload"
              @change="handleChange"
              :max-count="1"
              :customRequest="customUpload"
              :file-list="fileList"
              @preview="handlePreview"
            >
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
            <span style="color: red">*上传的图片可为院徽,学院代表性建筑等具有代表性的图片*</span>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="steps-action">
      <a-space>
        <a-button @click="getOut">返回<ArrowRightOutlined /></a-button>
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
  import { reactive, ref, defineEmits, onMounted, toRaw, watch, defineProps } from 'vue';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { Funding } from '../../../api/funding/funding-api';
  import dayjs from 'dayjs';
  // 选择单位
  const Deport = ref([]);
  async function getInitDeport() {
    try {
      let res = await Funding.FindDanWei();
      console.log(res, '单位');
      Deport.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };
  const formState = ref({});
  //获取信息
  const props = defineProps({
    DataId: String,
  });
  const fileList = ref();
  async function getInitdate() {
    try {
      let blfinancprojectid = props.DataId;
      let res = await Funding.FindDetail(blfinancprojectid);
      console.log(res, '详情');
      formState.value = res.blfinancproject;
      //图片回显
      fileList.value = [
        {
          uid: res.blfinancproject.blfinancprojectid,
          name: res.blfinancproject.blattachment,
          status: 'done',
          url: res.blfinancproject.blattachaddress,
        },
      ];
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //预览图片的方法
  const previewVisible = ref(false);
  const previewImage = ref('');
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    previewImage.value = file.url || file.preview;
    previewVisible.value = true;
  };
  const handleCancel = () => {
    previewVisible.value = false;
  };
  const emit = defineEmits();
  //返回表格
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };

  onMounted(() => {
    getInitDeport();
    getInitdate();
  });
</script>

<style lang="scss" scoped>
  .Funding-content {
    width: 70%;
    border-radius: 6px;
    min-height: 510px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

  .fromBox {
  }
  .jianjie span {
    display: block;
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
</style>
